import { FC, useEffect, useState } from "react";
import { Drawer, Radio, Space, Button } from "antd";
import { chatThemes, ChatTheme } from "@/styles/themes";
import { saveUserChatTheme, getUserChatTheme } from "@/util/storage";

interface ThemeSelectorProps {
  visible: boolean;
  onClose: () => void;
  userId: number;
  chatId: string;
  onThemeChange: (theme: ChatTheme) => void;
}

const ThemeSelector: FC<ThemeSelectorProps> = ({ 
  visible, 
  onClose, 
  userId, 
  chatId,
  onThemeChange
}) => {
  const [selectedTheme, setSelectedTheme] = useState<string>(
    getUserChatTheme(userId, chatId)
  );

  useEffect(() => {
    // 当组件加载时设置初始主题
    const currentThemeId = getUserChatTheme(userId, chatId);
    setSelectedTheme(currentThemeId);
    
    // 查找并应用保存的主题
    const themeToApply = chatThemes.find(theme => theme.id === currentThemeId) || chatThemes[0];
    onThemeChange(themeToApply);
  }, [userId, chatId]);

  const handleThemeChange = (themeId: string) => {
    setSelectedTheme(themeId);
    
    // 找到对应的主题对象
    const selectedThemeObj = chatThemes.find(theme => theme.id === themeId) || chatThemes[0];
    
    // 通知父组件主题已更改
    onThemeChange(selectedThemeObj);
  };

  const handleSave = () => {
    // 保存主题设置
    saveUserChatTheme(userId, chatId, selectedTheme);
    onClose();
  };

  return (
    <Drawer
      title="聊天主题设置"
      placement="right"
      closable={true}
      onClose={onClose}
      open={visible}
      width={250}
      getContainer={false}
      footer={
        <div style={{ textAlign: "right" }}>
          <Button onClick={onClose} style={{ marginRight: 8 }}>
            取消
          </Button>
          <Button onClick={handleSave} type="primary">
            保存
          </Button>
        </div>
      }
    >
      <div className="theme-selector">
        <h3>选择聊天主题</h3>
        <Radio.Group 
          value={selectedTheme} 
          onChange={(e) => handleThemeChange(e.target.value)}
          style={{ width: "100%" }}
        >
          <Space direction="vertical" style={{ width: "100%" }}>
            {chatThemes.map(theme => (
              <Radio key={theme.id} value={theme.id} style={{ width: "100%", marginBottom: "16px" }}>
                <div style={{ display: "flex", alignItems: "center" }}>
                  <div 
                    style={{ 
                      width: "180px",
                      height: "60px",
                      background: theme.chatBackground,
                      borderRadius: "8px",
                      display: "flex",
                      padding: "8px",
                      justifyContent: "space-between",
                    }}
                  >
                    <div
                      style={{
                        background: theme.friendMessageBg,
                        color: theme.messageTextColor,
                        padding: "4px 8px",
                        borderRadius: "8px",
                        fontSize: "12px",
                        maxWidth: "70px",
                      }}
                    >
                      你好
                    </div>
                    <div
                      style={{
                        background: theme.myMessageBg,
                        color: theme.messageTextColor,
                        padding: "4px 8px",
                        borderRadius: "8px",
                        fontSize: "12px",
                        maxWidth: "70px",
                      }}
                    >
                      {theme.name}
                    </div>
                  </div>
                </div>
              </Radio>
            ))}
          </Space>
        </Radio.Group>
      </div>
    </Drawer>
  );
};

export default ThemeSelector; 